<template>
    <div>
        <div>
            <el-config-provider :locale="zhCn"> <!--《:locale="zhCn 》设置语言-->

                <el-scrollbar height="70vh">
                    <!-- 请假申请 -->
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="请假申请" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="请假单号"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.leaveId"
                                        style="width: 354px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="申请日期"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.applicationDate"
                                        style="/*width: 260px;*/" disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <!--  -->
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="请假类型"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.leaveType"
                                        style="/*width: 260px;*/" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="姓名" label-position="top">
                                    <el-input placeholder="" v-model="user.employeeName" style="/*width: 260px;*/"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="所在部门"
                                    label-position="top">
                                    <el-input placeholder="" v-model="user.department.deptName"
                                        style="/*width: 260px;*/" disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <!--  -->
                        <el-col :span="24">
                            <!-- 空白分隔区域 -->
                            <div style="height: 10px; border-top: 0px dashed #e4e7ed; margin: 6px 0;"></div>
                        </el-col>

                        <!-- 假种说明 -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light">

                                <el-form-item label="假种说明" label-position="top">

                                    <el-table :data="holidaysTypeData" border stripe>
                                        <el-table-column v-for="col in holidaysType_columns" :prop="col.id"
                                            :key="col.id" :label="col.label" :width="col.width">
                                        </el-table-column>
                                    </el-table>

                                </el-form-item>

                            </div>
                        </el-col>
                        <!-- 请假日期 -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light">

                                <el-form-item label="请假日期" label-position="top">

                                    <el-table :data="leaveDateData" border stripe>
                                        <el-table-column type="index" width="50" />
                                        <el-table-column v-for="col in leaveDate_columns" :prop="col.id" :key="col.id"
                                            :label="col.label" :width="col.width">
                                        </el-table-column>
                                    </el-table>

                                </el-form-item>

                                <div class="action-btns" style="margin-top: 12px">
                                    <!-- <el-button type="primary" icon="Plus" @click="addRow">
                                        添加
                                    </el-button>
                                    <el-button type="success" icon="Edit" style="margin-left: 8px">
                                        快速填报
                                    </el-button> -->
                                </div>
                            </div>
                        </el-col>

                        <!--  -->
                        <el-col :span="24">
                            <!-- 空白分隔区域 -->
                            <div style="height: 10px; border-top: 0px dashed #e4e7ed; margin: 6px 0;"></div>
                        </el-col>

                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="合计请假天数"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.duration"
                                        style="width: 354px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="请假事由说明"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.reason"
                                        style="width: 354px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <!-- 相关证明 -->
                        <el-col :span="24">
                            <!-- 空白分隔区域 -->
                            <div style="height: 10px; border-top: 0px dashed #e4e7ed; margin: 6px 0;"></div>
                        </el-col>

                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="相关证明"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.relatedDocument"
                                        style="width: 354px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12" v-if="leaveApplicationDetails.annualLeave">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="当期年周期"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.annualLeave.annualCycle"
                                        style="width: 354px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="12" v-if="leaveApplicationDetails.annualLeave">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="年假天数（天）"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.annualLeave.annualDate"
                                        style="width: 354px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12" v-if="leaveApplicationDetails.annualLeave">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="已请年假天数"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.annualLeave.useDate"
                                        style="width: 354px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="12" v-if="leaveApplicationDetails.annualLeave">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="请假后剩余年假天数"
                                    label-position="top">
                                    <el-input placeholder="" v-model="leaveApplicationDetails.annualLeave.surplusDate"
                                        style="width: 354px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-scrollbar>

            </el-config-provider>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';
import request from '@/api/request';
// import type { UploadInstance } from 'element-plus'

// 获取session中的用户信息 - 需要解析JSON字符串
let user = JSON.parse(sessionStorage.getItem('user') || '{}');

let loadholidaysTypes = () => {
    request({
        url: "/holidayType/findByLeaveType",
        method: "get",
        params: { leaveType: props.leaveApplicationDetails.leaveType }
    }).then(resp => {
        console.log(resp.data)
        holidaysTypeData.value = resp.data
    })
}

let loadleaveDates = () => {
    request({
        url: "/leaveApplication/findByApplicationDate",
        method: "get",
        params: { createdAt: props.leaveApplicationDetails.createdAt }
    }).then(resp => {
        console.log(resp.data)
        leaveDateData.value = resp.data
    })
}

const props = defineProps({
    leaveApplicationDetails: {
        type: Object,
        default: () => ({})
    }
});

loadholidaysTypes()
loadleaveDates()

// 假种说明
const holidaysType_columns = ref([
    { id: 'leaveType', label: '请假类型', width: '160' },
    { id: 'leaveLength', label: '请假步长', width: '160' },
    { id: 'rangeApplication', label: '适用范围', width: '160' },
    { id: 'reason', label: '请假说明', width: '200' },
])
// 假种说明数据源
const holidaysTypeData = ref([])

// 请假日期
const leaveDate_columns = ref([
    { id: 'leaveDate', label: '请假日期', width: '160' },
    { id: 'leavePeriod', label: '请假时段', width: '160' },
    { id: 'duration', label: '请假天数小计', width: '160' },
    { id: 'attendanceCycle', label: '归属考勤周期', width: '200' },
])
// 请假日期数据源
const leaveDateData = ref([])

const isVisible = ref(false)
// 复制添加
const add = () => {
    isVisible.value = true
    router.push('./insert.vue')
}
//修改显示
const EditDisplay = ref(false)
//编辑
const Editor = () => {
    EditDisplay.value = true
}

//删除操作
const open = () => {
    ElMessageBox.confirm(
        '你确定要删除吗?',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',

            })
            emit("ref-table")
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })
        })
}
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}

.bottom-submit-bar {
    /* position: fixed; */
    /* 固定定位 */
    bottom: 0;
    /* 靠底部 */
    left: 0;
    width: 100%;
    background-color: #fff;
    /* 背景色，可根据需求调整 */
    border-top: 1px solid #eaeaea;
    /* 顶部边框，与页面区分 */
    padding: 12px 24px;
    /* 内边距，适配截图里的间距风格 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 按钮靠左，可根据实际需求调整 */
    z-index: 10;
    /* 提高层级，避免被其他内容覆盖 */
}
</style>
